<template>
  <div class="infinite-container">
    <mu-tabs :value="activeTab" @change="handleTabChange">
      <mu-tab value="tab0" title="全部" />
      <mu-tab value="tab1" title="未付款" />
      <mu-tab value="tab4" title="待接诊" />
      <mu-tab value="tab2" title="进行中" />
      <mu-tab value="tab3" title="待评价" />
    </mu-tabs>

    <div>
      <empty v-show="showEmpty"></empty>
      <ul class="item">
        <li v-for="(item,index) in historyList" :key="index">
          <div class="item-header">
            <div>
              <div>
                <span>订单时间:</span>
                <span>{{item.createTime||""}}</span>
              </div>
              <div>
                <span
                  class="going"
                  :style="{color: textColor(item.consultStatus)}"
                >{{item.onlineConsultAppointmentRecordStatus | filterMedicalStatus}}</span>
              </div>
            </div>
          </div>
          <div class="item-con" @click="goToDetail(item)">
            <div>
              <div class="item-con-mid">
                <div>
                  <img src="../../assets/wzjl/icon_zxwz_doctor.png" v-if="!item.header" />
                  <img :src="item.header" v-else class="doctor-image" />
                </div>
                <div>
                  <h3>
                    <span>{{item.doctorName||""}}</span>
                    <span>{{item.departmentName||""}}</span>
                  </h3>
                  <div>
                    <table>
                      <tr>
                        <td>{{item.question||""}}</td>
                      </tr>
                    </table>
                  </div>
                </div>
              </div>
              <div class="item-right"></div>
            </div>
          </div>
          <div class="item-footer">
            <div>
              <div>
                <img src="../../assets/wzhis/icon_images.png" />
              </div>
              <div>
                <span>{{item.consultType | getConsultType}}</span>
              </div>
            
              <div v-if="item.payRemainingSeconds">
                剩余时间：
                <TimeCountDown :leftTime="item.payRemainingSeconds" :data-index="index" />
              </div>
              <div v-else-if="item.onlineConsultAppointmentRecordStatus === '0'">订单支付超时</div>
              <div>
                <!--待支付-->
                <div v-show="item.onlineConsultAppointmentRecordStatus === '0'&&item.payRemainingSeconds>0">
                  <mu-raised-button label="去支付" primary @click="goToPay(item)"></mu-raised-button>
                </div>
                <!--待接诊-->
                <div v-show="item.onlineConsultAppointmentRecordStatus == 1">
                  <mu-raised-button label="取消预约" primary @click="openCancelDialog(item)"></mu-raised-button>
                </div>
                <!--进行中-->
                <div v-show="item.onlineConsultAppointmentRecordStatus == 2">
                  <mu-raised-button label="立即咨询" primary @click="goToDetail(item)"></mu-raised-button>
                </div>
                <!--已结束-->
                <div v-show="item.onlineConsultAppointmentRecordStatus == 3">
                  <!--未评价-->
                  <mu-raised-button
                    label="立即评价"
                    primary
                    @click="goJudge(item)"
                  ></mu-raised-button>
                  <!--已评价-->
                  <mu-raised-button label="再次咨询" primary @click="goDocPage(item)"></mu-raised-button>
                </div>
                <!--已取消，已关闭-->
                <div v-show="item.onlineConsultAppointmentRecordStatus >= 4">
                  <mu-raised-button label="再次咨询" primary @click="goDocPage(item)"></mu-raised-button>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import searchBarClick from "../../components/SearchBarClick.vue";
import leftBorderTitle from "../../components/leftBorderTitle.vue";
import Vue from "vue";
import empty from "@/components/empty";
import { commonAjaxJson, RESTFUL_API } from "../../api/api";
import TimeCountDown from "../../components/TimeCountDown.vue";

export default {
  data() {
    return {
      activeTab: "tab0",
      timeCounter: null,
      historyList: [],
      showEmpty: false,
      kmap: {
        tab0: "", // 全部
        tab1: "0", // 待支付
        tab2: "1", // 待接诊
        tab3: "2", // 进行中
        tab4: "3" // 待评价
      },
      param: {
        onlineConsultAppointmentRecordStatus: ""
      },
      param1: {
        consultId: 0
      }
    };
  },
  filters: {
    getConsultType(val) {
      // 咨询类型imageAble 图文   video视频  tel电话
      if (val == "imageAble") {
        return "图文咨询";
      } else if (val == "tel") {
        return "电话咨询";
      } else if (val == "video") {
        return "视频咨询";
      }
    }
  },
  components: {
    searchBarClick,
    leftBorderTitle,
    empty,
    TimeCountDown
  },
  mounted() {
    this.getQueryList();
  },
  beforeDestroy() {
    this.timeCounter && this.timeCounter.stop();
  },
  methods: {
    openCancelDialog(item) {
      this.$router.push({
        path: "/queryHistory/cancelReason",
        query: {
          cid: item.consultId
        }
      });
    },
    cancelQuery() {
      commonAjaxJson(RESTFUL_API.cancelConsult, this.param1, true).then(res => {
        if (res.data.code == 200) {
          this.$store.commit("UPDATE_TOAST", {
            message: "操作成功!"
          });
          this.getQueryList(this.kmap[this.activeTab]);
        } else {
          this.$store.commit("UPDATE_TOAST", {
            message: res.data.message
          });
        }
      });
    },
    textColor(val) {
      if (val == 10 || val == 21) {
        return "orange";
      } else if (val == 22) {
        return "green";
      } else {
        return "gray";
      }
    },
    goJudge(val) {
      this.$router.push({
        path: "/queryOnline/judge",
        query: val
      });
    },
    checkStatue(statue) {
      if (statue == 11) {
        return "已结束";
      } else if (statue == 12) {
        return "已取消";
      } else if (statue == 13) {
        return "已退款";
      } else {
        return "";
      }
    },
    goToPay(item) {
      if (item.leftTimeTxt != "已超时") {
        // this.$store.commit("UPDATE_PAGEDATA", item);
        this.$router.push("/queryOnline/confirmPay?cid=" + item.consultId);
      }
    },
    goToDetail(item) {
      // debugger
      if (item.consultStatus == 10 || item.consultStatus == 14) {
        this.$router.push({
          path: "/queryHistory/topayDetail",
          query: {
            cid: item.consultId,
            onlineConsultAppointmentRecordStatus: item.onlineConsultAppointmentRecordStatus
          }
        });
      } else {
        // 跳转到原生的IM页面
        window.location.href =
          "app://queryOnlineIM?consultId=" +
          item.consultId +
          "&doctorName=" +
          item.doctorName +
          "&doctorCode=" +
          item.doctorCode +
          "&status=" +
          item.consultStatus +
          "&doctorId=" +
          item.doctorId +
          "&consultType=" +
          item.consultType;
      }
    },

    // 再次咨询，跳转医生主页
    goDocPage(item) {
      this.$router.push(`/queryOnline/doctorDetail?docid=${item.doctorId}&departmentId=${item.departmentId}`);
    },

    getQueryList(status = "") {
      this.param.onlineConsultAppointmentRecordStatus = status;
      commonAjaxJson(RESTFUL_API.queryHisList, this.param, true).then(res => {
        const { code, data } = res.data;
        if (code == 200) {
          // console.log(res.data.data.list);
          if (data.list.length > 0) {
          }
          if (data.list.length == 0) {
            this.showEmpty = true;
          } else {
            this.showEmpty = false;
          }
          this.historyList = data.list;
        } else {
          this.showEmpty = true;
        }
      });
    },
    handleTabChange(val) {
      this.activeTab = val;
      this.getQueryList(this.kmap[val]);
    }
  }
};
</script>

<style scoped lang="less">
@import "../../common/css/flex.css";
@import "../../common/css/component";

.ostatus {
  width: 42px;
  height: 21px;
  position: absolute;
  font-size: 10px;
  color: #fff;
  text-align: center;
  top: 0px;
  right: 15px;
  background: url("../../assets/wzjl/tab_zxwz_zx.png") no-repeat center
    center/100% 100%;
}

.tabcon {
  > ul {
    width: 100%;
  }
}

.item {
  > li {
    width: 100%;
    overflow: hidden;
    margin-top: 10px;
  }
  &-header {
    padding-left: 15px;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid #efefef;
    > div {
      width: 100%;
      height: 40px;
      display: table;
      font-size: 14px;
      > div {
        display: table-cell;
        vertical-align: middle;
      }
      > div:first-child {
        > span:first-child {
          color: #666;
        }
        > span:nth-child(2) {
          color: #333;
        }
      }
      > div:nth-child(2) {
        padding-right: 15px;
        width: 1%;
        white-space: nowrap;
        > span.topay {
          color: #ff6600;
        }
        > span.going {
          color: #2abc6d;
        }
        > span.finished {
          color: #999;
        }
      }
    }
  }
  &-con {
    border-bottom: 1px solid #e8e8e8;
    background: #fff;
    padding: 10px 0 10px 15px;
    > div {
      width: 100%;
      position: relative;
      padding-right: 32px;
    }
    &-mid {
      display: table;
      width: 100%;
      > div:first-child {
        display: table-cell;
        vertical-align: middle;
        width: 52px;
        > img {
          width: 52px;
          height: 52px;
          vertical-align: top;
        }
      }
      > div:nth-child(2) {
        display: table-cell;
        padding-left: 15px;
        padding-right: 15px;
        vertical-align: middle;
        > h3 {
          font-size: 16px;
          color: #666;
          font-weight: normal;
          font-size: 14px;
          padding-bottom: 2px;
          > span:first-child {
            color: #333;
            font-size: 16px;
            padding-right: 10px;
          }
        }
        > div {
          font-size: 14px;
        }
        > div:first-of-type {
          color: #666;
          table {
            table-layout: fixed;
            width: 100%;
            td {
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              vertical-align: text-bottom;
            }
          }
        }
      }
    }
  }
  &-right {
    position: absolute;
    top: 50%;
    right: 12px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 16px;
    width: 16px;
    background: #fff url(../../assets/images/arrow_dry.png) no-repeat center
      center/8px 16px;
  }
  &-left {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  &-footer {
    width: 100%;
    padding: 5px 0 5px 15px;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid #efefef;
    img {
      width: 14px;
      height: 14px;
    }
    > div {
      width: 100%;
      height: 40px;
      display: table;
      font-size: 14px;
      > div {
        display: table-cell;
        vertical-align: middle;
      }
      > div:first-child {
        width: 20px;
        line-height: 0;
      }
      > div:nth-child(2) {
      }
      > div:nth-child(3) {
        padding-right: 15px;
        text-align: right;
        color: #ff6600;
      }
      > div:nth-child(4) {
        width: 75px;
        padding-right: 15px;
        text-align: right;
        white-space: nowrap;
      }
    }
  }
}
</style>
